<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="填写店铺资料" :placeholder="true" bgColor="#3ACD90"
			:titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>

		<view class="mt20" style="background-color: #ffffff;padding:0 20rpx">
			<u--form labelPosition="left" :model="shopInfo" :rules="rules" ref="uForm">
				<u-form-item label="负责人手机号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.phone" border="none"></u--input>
				</u-form-item>
				<u-form-item label="商铺名称"  borderBottom labelWidth="200">
					<u--input v-model="shopInfo.mer_name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="负责人" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="入驻分类" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.merchant_category_id"
					    :localdata="merchant_category_range"
					    @change="category_change"
					></uni-data-select>
				</u-form-item>
				<u-form-item label="入驻店铺分类" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.mer_type_id"
					    :localdata="mer_type_range"
					    @change="type_change"
					></uni-data-select>
				</u-form-item>
				
				
				<u-form-item label="企业名称"  borderBottom labelWidth="200" prop="reg_name">
					<u--input v-model="shopInfo.reg_name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="企业简称" borderBottom labelWidth="200" prop="short_name">
					<u--input v-model="shopInfo.short_name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="票据名称" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.receipt_name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="企业类型" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.ent_type"
					    :localdata="ent_range"
					    @change="ent_change"
					></uni-data-select>
				</u-form-item>
				<u-form-item label="场景类型" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.scene_type"
					    :localdata="scene_range"
					    @change="scene_change"
					></uni-data-select>

				</u-form-item>
				<u-form-item label="营业执照" borderBottom labelWidth="150">
					<u-upload
						:fileList="fileList3"
						@afterRead="afterRead"
						@delete="deletePic"
						name="3"
						:maxCount="1"
					></u-upload>
				</u-form-item>
				<u-form-item label="执照编号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.license_code" border="none"></u--input>
				</u-form-item>
				<u-form-item label="执照类型" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.license_type"
					    :localdata="license_range"
					    @change="license_change"
					></uni-data-select>

				</u-form-item>
				
				<u-form-item label="法人姓名" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.legal_name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="法人证照类型" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.legal_cert_type"
					    :localdata="legal_cert_range"
					    @change="legal_cert_change"
					></uni-data-select>

				</u-form-item>
				<u-form-item label="法人证照号码" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.legal_cert_no" border="none"></u--input>
				</u-form-item>
				<u-form-item label="法人证件有效期类型" borderBottom labelWidth="200">
					<uni-data-select
					    v-model="shopInfo.legal_cert_validity_type"
					    :localdata="legal_cert_validity_type_range"
					    @change="legal_cert_validity_type_change"
					></uni-data-select>
				</u-form-item>
				
				<u-form-item label="身份证有效期开始" borderBottom labelWidth="200">
					<view @click="startShow = true" style="display: flex;">
					<u--input
							v-model="idcardStartTime"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择"
							border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
					</view>
				</u-form-item>
				
				<u-form-item label="身份证有效期结束" borderBottom labelWidth="200">
					<view @click="endShow = true" style="display: flex;">
					<u--input
						v-model="idcardEndTime"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
					</view>
				</u-form-item>
				
				<u-form-item label="法人手机号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.legal_mobile_no" border="none"></u--input>
				</u-form-item>
				
				<u-form-item label="法人地址" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.legal_addr" border="none"></u--input>
				</u-form-item>
				
				<u-form-item label="身份证国徽" borderBottom labelWidth="150">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						:maxCount="1"
						name="1"
					></u-upload>
				</u-form-item>
				
				<u-form-item label="身份证人像" borderBottom labelWidth="150">
					<u-upload
						:fileList="fileList2"
						@afterRead="afterRead"
						@delete="deletePic"
						:maxCount="1"
						name="2"
					></u-upload>
				</u-form-item>
				
				<u-form-item label="企业照片" borderBottom labelWidth="150">
					<view style="display: flex;">
						<view>
							<u-upload
								:fileList="fileList6"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								:maxCount="1"
							></u-upload>
						</view>
						<view>
							<u-upload
								:fileList="fileList7"
								@afterRead="afterRead"
								@delete="deletePic"
								name="7"
								:maxCount="1"
							></u-upload>
						</view>
						
					</view>
				
				</u-form-item>
				
				
				<u-form-item label="备注" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.mark" border="none"></u--input>
				</u-form-item>
				
				
				
			</u--form>
		</view>
		
		<u-datetime-picker
				:show="startShow"
				v-model="shopInfo.legal_cert_begin_date"
				mode="date"
				@confirm="startShowConfirm"
				@cancel="startShowCancel"
		></u-datetime-picker>
		
		<u-datetime-picker
				:show="endShow"
				v-model="shopInfo.legal_cert_end_date"
				mode="date"
				@confirm="endShowConfirm"
				@cancel="endShowCancel"
				
		></u-datetime-picker>
		
		<u-tabbar
			:value="value6"
			@change="name => value6 = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="返回" icon="play-right" @click="backview"></u-tabbar-item>
			<u-tabbar-item text="提交" icon="checkmark" @click="submit"></u-tabbar-item>
			
		</u-tabbar>
		
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import {
		uploadImg,
		shopinfoForm,
		getBusinessCate,
		getBusinessType
	} from "@/common/apis/other.js"
	import {
		BASE_URL
	} from '@/env.js'
	export default {
		data() {
			return {
				startShow: false,
				endShow: false,
				idcardStartTime:"",
				idcardEndTime:"",
				
				shanghuStartShow:false,
				shanghuEndShow:false,
				shanghuStartTime:"",
				shanghuEndTime:"",
				
				shopInfo: {
					phone:'',
					mer_name:'',
					name:'',
					merchant_category_id:'',
					mer_type_id:'',
					reg_name:'',
					short_name:'',
					receipt_name:'',
					ent_type:'',
					scene_type:'',
					license_pic:'',
					
					license_code:'',
					license_type:'',
					legal_name:'',
					legal_cert_type:'',
					legal_cert_no:'',
					legal_cert_begin_date:'',
					legal_cert_end_date:'',
					legal_mobile_no:'',
					legal_addr:'',
					legal_cert_back_pic:'',
					legal_cert_front_pic:'',
					mark:'',
					images:[]
					
					
					
					
					
				},
				rules: {
					'reg_name': {
						type: 'string',
						required: true,
						message: '请填写企业名称',
						trigger: ['blur']
					},
					'short_name': {
						type: 'string',
						required: true,
						message: '请填写企业简称',
						trigger: ['blur']
					},
				},
				fileList1:[],
				fileList2:[],
				fileList3:[],
				fileList4:[],
				fileList5:[],
				fileList6:[],
				fileList7:[],
				category_range:[
					{ value: 0, text: "篮球" },
					{ value: 1, text: "足球" },
					{ value: 2, text: "游泳" },
				],
				type_range:[
					{ value: 0, text: "篮球" },
					{ value: 1, text: "足球" },
					{ value: 2, text: "游泳" },
				],
				ent_range:[
					{ value: 1, text: "政府机构" },
					{ value: 2, text: "国营企业" },
					{ value: 3, text: "私营企业" },
					{ value: 4, text: "外资企业" },
					{ value: 5, text: "个体工商户" },
					{ value: 6, text: "其它组织" },
					{ value: 7, text: "事业单位" },
					{ value: 9, text: "业主委员会" },
				],
				scene_range:[
					{ value: 'ONLINE', text: "线上场景" },
					{ value: 'OFFLINE', text: "线下场景" },
					{ value: 'ALL', text: "线上线下" },
				],
				license_range:[
					{ value: 'NATIONAL_LEGAL', text: "营业执照" },
					{ value: 'NATIONAL_LEGAL_MERGE', text: "营业执照(多证合一)" },
					{ value: 'INST_RGST_CTF', text: "事业单位法人证书" },
					{ value: 'CERTIFICATE_TYPE_0001', text: "社会团体法人登记证书" },
					{ value: 'CERTIFICATE_TYPE_0002', text: "民办非企业单位登记证书" },
					{ value: 'CERTIFICATE_TYPE_0003', text: "基金会法人登记证书" },
					{ value: 'CERTIFICATE_TYPE_0004', text: "宗教活动场所登记证" },
					{ value: 'CERTIFICATE_TYPE_0005', text: "其他证书/批文/证明" },
					{ value: 'CERTIFICATE_TYPE_0006', text: "执业许可证/执业证" },
					{ value: 'CERTIFICATE_TYPE_0007', text: "基层群众性自治组织特别法人统一社会信用代码证" },
					{ value: 'CERTIFICATE_TYPE_0008', text: "农村集体经济组织登记证" },
					{ value: 'OWNERS_COMMITTEE', text: "业主委员会备案证明" },
					
				],
				legal_cert_range:[
					{ value: '00', text: "身份证" },
					{ value: '01', text: "护照" },
					{ value: '02', text: "军官证" },
					{ value: '03', text: "士兵证" },
					{ value: '04', text: "回乡证" },
					{ value: '05', text: "户口本" },
					{ value: '06', text: "外国护照" },
					{ value: '07', text: "其他" },
					{ value: '08', text: "暂住证" },
					{ value: '09', text: "警官证" },
					{ value: '10', text: "文职干部证" },
					{ value: '11', text: "港澳台同胞通行证" },
					{ value: '13', text: "外国人居留证" },
					{ value: '14', text: "台胞证" },
					{ value: '15', text: "港澳台居住证" },
					
				],
				
				legal_cert_validity_type_range:[
					{ value: '0', text: "非长期有效" },
					{ value: '1', text: "长期有效" },
				],
				merchant_category_range:[],
				mer_type_range:[]
				
			};
		},
		methods: {
			scene_change(e){
				console.log("e",e)
			},
			ent_change(e){
				console.log("e",e)
			},
			category_change(e){
				console.log("e:", e);
			},
			type_change(e){
				console.log("e:", e);
			},
			license_change(e){
				console.log("e:", e);
			},
			legal_cert_change(e){
				console.log("e:", e);
			},
			legal_cert_validity_type_change(e){
				console.log("e:", e);
			},
			
			backview(){
				this.$Router.pushTab({
					path: '/pages/tabBar/userInfo'
				})
				
			},
			submit(){
				
				console.log(this.shopInfo)
				
				this.$refs.uForm.validate().then(res => {
					console.log('res',res)
					
					this.shopInfo.legal_cert_begin_date = this.idcardStartTime;
					this.shopInfo.legal_cert_end_date = this.idcardEndTime;
					
					shopinfoForm(this.shopInfo).then( result => {
						if(result.code == 1){
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							this.$Router.pushTab({
								path: '/pages/tabBar/userInfo'
							})
						}else{
							uni.showToast({
								title: result.message,
								duration: 2000
							});
						}
						
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			startShowConfirm(value){
				this.startShow = false
				this.idcardStartTime = dayjs(value.value).format('YYYY-MM-DD');
			},
			startShowCancel(){
				this.startShow = false
			},
			endShowConfirm(value){
				this.endShow = false
				this.idcardEndTime = dayjs(value.value).format('YYYY-MM-DD');
			},
			endShowCancel(){
				this.endShow = false
			},
			shanghuStartShowConfirm(value){
				this.shanghuStartShow = false
				this.shanghuStartTime = dayjs(value.value).format('YYYY-MM-DD');
				
			},
			shanghuStartShowCancel(){
				this.shanghuStartShow = false
			},
			shanghuEndShowConfirm(value){
				this.shanghuEndShow = false
				this.shanghuEndTime = dayjs(value.value).format('YYYY-MM-DD');
			},
			shanghuEndShowCancel(){
				this.shanghuEndShow = false
			},
			// 新增图片
			async afterRead(event) {
				var indexTemp = event.name
				console.log('afterRead',event)
				
				this[`fileList${event.name}`].splice(1, 1, {url: event.file.url} )
				
				await this.uploadFilePromise(event.file.url).then( res => {
					console.log(res)
					let result = JSON.parse(res)

					let imageUrl = result.data.path
					if(indexTemp == 1){
						this.shopInfo.legal_cert_back_pic = imageUrl
					}else if(indexTemp == 2){
						this.shopInfo.legal_cert_front_pic = imageUrl
					}else if(indexTemp == 3){
						this.shopInfo.license_pic = imageUrl
					}else if(indexTemp == 4){
						this.shopInfo.mentouzhao = imageUrl
					}else if(indexTemp == 5){
						this.shopInfo.neijingtu = imageUrl
					}else if(indexTemp == 6){
						this.shopInfo.images.push(imageUrl)
					}else if(indexTemp == 7){
						this.shopInfo.images.push(imageUrl)
					}
				})

				
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: BASE_URL+'/business/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header:{
							"X-token":uni.getStorageSync('token')
						},
						success: (res) => {
							console.log('res',res)
							resolve(res.data)
						}
					});
				})
			},
		},
		onReady() {
			// //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			getBusinessCate().then(res=>{
				console.log('getBusinessCate',res)
				if(res.status == 200){
					const transformedData = res.data.map(item => ({
					  value: item.merchant_category_id.toString(),
					  text: item.category_name
					}));
					
					this.merchant_category_range = transformedData
				}
				
			})
			getBusinessType().then(res=>{
				console.log('getBusinessType',res)
				if(res.status == 200){
					const transformedData = res.data.map(item => ({
					  value: item.mer_type_id.toString(),
					  text: item.type_name
					}));
					this.mer_type_range = transformedData
				}
				
			})
		}
	};
</script>

<style scoped>
	/deep/ .uni-select{
		border: 0;
	}
</style>